﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>仿天猫焦点图</title>
		<script src="js/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
	    <style>
	       #focusimg{
	          border:1px solid #090;
	          position:relative;
	          width:600px;
	          left:50%;
	          margin-left:-300px;      
            } 
           #imgs{
	         text-align:center;
           }

           #imgs img{
	        vertical-align:top;
	        border:none;
           }

          #focus1{
	        text-align:center;
	        position:absolute;
	        top:350px;
	        left:230px;
          }

          #focus1 span{
	          display:inline-block;
	          _display:block;
	          _float:left;
	          width:16px;
	          height:16px;
	          _overflow:hidden;
           	  background:url(img/dot.png) no-repeat;
	          margin-right:10px;
           }
           #imgs span{
            display: none;
           	position: absolute;
           	padding-top: 20px;
           	width: 30px;
           	height: 40px;
           	background:#999999;         	
           	opacity: .4;
           	top:170px;
           	cursor: pointer;
                *filter:alpha(opacity=40);
           	
           }
           #imgs span.right{
           	right: 0px;          	
           }
           #imgs span.left{
           	left:0px;
           }
	    </style>
	    <script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
	    <script>
	    	$(function(){
	    		var i=0;//控制自动播放的索引
	    		var curr=0;//存储向前或向后的索引
	    		setInterval(function(){
	    			if(i>4){
	    				i=0;
	    			}
	    			if(i<0){
	    				i=0;
	    			}
	    			$("#focus1 span:eq("+i+")")
	    			.css({"background":"url(img/dotActive.png)"})
	    			.siblings("span").css({"background":"url(img/dot.png)"});
	    			$("#imgs img").attr("src","img/"+i+".jpg");
	    			$("#imgs a").attr("href",i+".html");
	    			curr=i;
	    			i++;
	    		},2000);
	    		//点击焦点切换
	    		$("#focus1 span").click(function(){
	    			$(this).css({"background":"url(img/dotActive.png)"})
	    			.siblings("span").css({"background":"url(img/dot.png)"});
	    			$("#imgs img").attr("src","img/"+($(this).index())+".jpg");
	    			$("#imgs a").attr("href",($(this).index())+".html");
	    			i=$(this).index();
	    		});
	    		//点击上一个
	    		$(".left").click(function(){
	    			curr--;
	    			if(curr<0){
	    			  	curr=4;
	    			 }
	    			 $("#focus1 span:eq("+curr+")")
	    			.css({"background":"url(img/dotActive.png)"})
	    			.siblings("span").css({"background":"url(img/dot.png)"});
	    			$("#imgs img").attr("src","img/"+curr+".jpg");
	    			$("#imgs a").attr("href",curr+".html");
	    			i=curr;		  
	    		    });
	    		    //点击下一个
	    		    $(".right").click(function(){
	    			curr++;
	    			if(curr>4){
	    			  	curr=0;
	    			 }
	    			 $("#focus1 span:eq("+curr+")")
	    			.css({"background":"url(img/dotActive.png)"})
	    			.siblings("span").css({"background":"url(img/dot.png)"});
	    			$("#imgs img").attr("src","img/"+curr+".jpg");
	    			$("#imgs a").attr("href",curr+".html");
	    			i=curr;		  
	    		    });
	    		    //鼠标划入划出显示隐藏span.left和span.right
	    		    $("#focusimg").mouseover(function(){
	    		    	 $("#imgs span").css({"display":"block"});
	    		        
	    		    });
	    		    $("#focusimg").mouseout(function(){
	    		    	 $("#imgs span").css({"display":"none"});
	    		    	
	    		    });
	    		  
	    	});
	    </script>
<!--IE6支持png背景透明-->
<!--[if IE 6]>
<script type="text/javascript" src="js/iepng.js"></script> 
<script type="text/javascript">
	    	EvPNG.fix('img,.s1,.s2,.s3,.s4,.s5');
	    </script>
<![endif]-->

</script>
	</head>
	<body>
		<div id="focusimg">
          <div id="imgs">
             <a href="0.html">
               <img src="img/0.jpg">
            </a>
            <span class="left">&lt;</span>
            <span class="right">&gt;</span>
            
           
          </div>
        <div id="focus1">
          <span class="s1" style="background:url(img/dotActive.png);"></span>
          <span class="s2"></span>
          <span class="s3"></span>
          <span class="s4"></span>
          <span class="s5"></span>
       </div>
</div>
	</body>
</html>
